<div class="right_col" role="main">
	this is thymeleatIndex

	<div id="userDiv">
		<h4>{{title}}</h4>
		<h3>单向绑定</h3>
		<p>
			cityId:<input typle="text" v-bind:value="city.cityId">
		</p>
		<p>
			cityName:<input typle="text" :value="city.cityName">
		</p>
		<hr>
		<h3>双向绑定</h3>
		<input type="hidden" id="cityId" value="1912">
		<p>
			cityId:<input   typle="text" v-model:value="city.cityId">
		</p>
		<p>
			cityName:<input typle="text" v-model:value="city.cityName">
		</p>
		<hr>
		<h3>事件绑定</h3>
		<input type="button" @click="test_1()" value="test_1"> <input
			type="button" v-on:click="test_1()" value="test_1">
		<hr>
		<h3>循环</h3>
		<select >
			<option v-for="(role,index) in roles">{{role.name}}</option>
		</select>
		<hr>
		<h3>自定义组件<img-demo></h3>
		<button-count></button-count>
		<hr>
		<img-demo src="/images/123.jpg">
		
	</div>
</div>
<script type="text/javascript">
	/* 全局注册组件 */
	Vue.component("img-demo",{
		template:"<img>"
			})
			
	Vue.component("button-count",{
		data:function(){
			return {count:0}
		},
		methods:{
			countFunction:function(){
				this.count++;
			}
		},
		template:"<button @click='countFunction()'>{{count}} </button>"
	})

	var vueTest=new Vue({
		el:"#userDiv",
		data: {
		title: "Vue test",
		city: {
			cityId:11,
			cityName:"fuzhou"
			},
		roles: [
				{id: 1, name: "admin"},
				{id: 2, name: "manager"},
				{id: 3, name: "staff"},
				],
		},
		methods:{
			test_1: function() {
				console.log(this.city);
			},
			initCity:function(){
				var cityId=$("#cityId").val();
				console.log("cityId"+cityId)
				var self=this;
				$.ajax({
					url:"/api/city/"+cityId,
					type:"get",
					success:function(city){
						self.city=city;
					},
					error:function(){
						console.log("404");
					}
				});
			}
		},
		created:function(){
			window.initCity=this.initCity;
		},
		mounted:function(){
			this.initCity();
		}
	});

</script>
